import React from 'react'
// 接收,useSelector会返回一个对象
import {useSelector,useDispatch} from 'react-redux'
import {add} from '../../store/modules/CounterStore'
import {sub} from '../../store/modules/CounterStore'


export default function Counter() {
    // state是整个仓库
    const {count} =useSelector(state=>state.CounterStore)
    const dispatch=useDispatch()

    const handleAdd=()=>{
        // 构建一个action
        const action=add()
        // 提交action给store
        dispatch(action)
    }
    const handleSub=()=>{
        const action=sub()
        dispatch(action)
    }
  return (
    <div>
        <div>{count}</div>
        <button onClick={handleAdd}>add</button>
        <button onClick={handleSub}>sub</button>
    </div>
  )
}
